<template>
  <div id="detail">
    <detail-nav-bar ref="navbar" class="nav-bar" @titleClick="titleClick"></detail-nav-bar>

    <scroll class="content" @scroll="scroll" ref="scroll">
      <detail-swiper ref="swiper" :top-images="topImages"/>
      <detail-base-info :goods-info="goodsInfo"/>
      <detail-shop-info :shop="shopInfo"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo"></detail-goods-info>
      <detail-params-info ref="params" :params-info="itemParams"></detail-params-info>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <goods-list ref="recommend" :goods="recommend"></goods-list>
    </scroll>
    <back-top v-show="isShowBackTop" @click.native="backTop"></back-top>
    <detail-bottom-bar class="bottom-bar" @addCart="addToCart"></detail-bottom-bar>
    <!--    <toast :message="message" :show="show"></toast>-->
  </div>
</template>

<script>

  import {mapActions} from 'vuex'

  import Scroll from "../../components/common/scroll/Scroll";
  import GoodsList from "../../components/content/goods/GoodsList";

  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamsInfo from "./childComps/DetailParamsInfo";
  import DetailCommentInfo from "./childComps/DetailCommentInfo";
  import DetailBottomBar from "./childComps/DetailBottomBar";

  import {getDetail, getRecommend, Goods} from "network/detail";

  import {BackTopMixin} from "../../common/mixin";
  import {ShowBackTOPYAxis} from "../../common/constant";


  // import Toast from "../../components/common/toast/Toast";

  export default {
    name: "Detail",
    mixins: [BackTopMixin],
    data() {
      return {
        iid: null,
        topImages: [],
        goodsInfo: null,
        shopInfo: {},
        detailInfo: {},
        itemParams: {},
        commentInfo: null, // 评论信息
        recommend: [],
        topYs: [],

        // message: "",
        // show: false
      }
    },
    methods: {
      ...mapActions([
        'addCart'
      ]),
      /*滚动条监听*/
      scroll(position) {

        this.isShowBackTop = -position.y > ShowBackTOPYAxis

        /*监听navbar 跟着滚动改边*/
        let currentIndex
        let y = -position.y
        if (y < this.$refs.params.$el.offsetTop) {
          currentIndex = 0
        } else if (y >= this.$refs.params.$el.offsetTop &&
          y < this.$refs.comment.$el.offsetTop) {
          currentIndex = 1
        } else if (y >= this.$refs.comment.$el.offsetTop &&
          y < this.$refs.recommend.$el.offsetTop) {
          currentIndex = 2
        } else if (y >= this.$refs.recommend.$el.offsetTop) {
          currentIndex = 3
        }
        this.$refs.navbar.currentIndex = currentIndex
      },
      /*监听 navbar 点击滑动*/
      titleClick(index) {
        let el = null
        switch (index) {
          case 0:
            el = this.$refs.swiper.$el
            break
          case 1:
            el = this.$refs.params.$el
            break
          case 2:
            el = this.$refs.comment.$el
            break
          case 3:
            el = this.$refs.recommend.$el
            break
        }
        this.$refs.scroll.scrollToElement(el)
        // this.$refs.scroll.scrollTo(0, -this.topYs[index], 1000)
      },
      /*添加到购物车*/
      addToCart() {
        // 1.获取购物车数据
        const product = {
          image: this.topImages[0],
          title: this.goodsInfo.title,
          desc: this.goodsInfo.desc,
          price: this.goodsInfo.realPrice,
          iid: this.iid
        }
        // this.$store.dispatch('addCart', product).then(res => {console.log(res)})
        this.addCart(product).then(res => {
          this.$toast.show(res, 1500)

          /* this.show = true
           this.message = res
           setTimeout(() => {
             this.show = false
             this.message = ''
           }, 1500)
 */
        })
      },


    },
    created() {
      /*商品id*/
      this.iid = this.$route.params.iid
      getDetail(this.iid).then(res => {
        const data = res.result
        console.log(data)
        /*轮播图数据*/
        this.topImages = data.itemInfo.topImages

        /*创建商品对象*/
        this.goodsInfo = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
        /*店铺对象*/
        this.shopInfo = data.shopInfo

        /*商品详情数据*/
        this.detailInfo = data.detailInfo
        /*参数信息*/
        this.itemParams = data.itemParams
        /*评论信息*/
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate
        }
      })
      getRecommend().then(resp => {
        this.recommend = resp.data.list
      })
    },
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      Scroll,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      GoodsList,
      DetailBottomBar,
      // Toast
    }
  }
</script>

<style scoped>

  .nav-bar {
    position: relative;
    z-index: 100;
    background-color: #fff;
  }

  #detail {
    height: 100vh;
    background-color: #fff;
    position: absolute;
    z-index: 1;
  }

  .content {
    height: calc(100% - 44px - 49px);
    background-color: #fff;
  }


</style>
